<%@ page pageEncoding='UTF-8'%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<s:set var="contextPath" value="#request.get('javax.servlet.forward.context_path')" scope="request" />
<!DOCTYPE html>
<head>
    <title>Drug Stock Registration</title>
    <%-- header --%>
    <jsp:include page="/WEB-INF/content/common/Header.jsp" flush="true"/>
    <script src="${contextPath}/js/jquery/jquery.validate.js"></script>
	<script src="${contextPath}/js/drugstock/drugstock.js"></script> 
    <script src="${contextPath}/js/jquery/additional-methods.min.js"></script> 
</head>
<body class="metro home">
	<%-- tob-bar --%>
    <jsp:include page="/WEB-INF/content/common/TopBar.jsp" flush="true"/>
    	
	<div id="main-container" class="body-wrapper">
        <%-- tob-container --%>
    	<jsp:include page="/WEB-INF/content/common/TopContainer.jsp" flush="true"/>
        
    	<div id="body-container">
        	<div id="drug-stock-registration-form-container" class="form-container">
            	<%-- header-container --%>
                <s:set var="mode" value="'registration'"/>
                <jsp:include page="/WEB-INF/content/drugstock/DrugStockMenuContainer.jsp" flush="true"/>
				
                <div class="form-banner-container place-left">
                	<img src="${contextPath}/img/page/drug/drugstock.jpg"/>
                </div>
                
                <div class="form-body-container place-right" style="width:52%">
                	<form id="drug-stock-registration-form" class="registration-form drug-stock-form" action="${contextPath}/drugstock/insert" method="post">
                	<fieldset>
                    	<legend>Drug Stock Registration Form</legend>
                        
                        <div class="action-error-container">
                            <s:if test="hasActionErrors()">  
                                <s:actionerror/>
                            </s:if>
                        </div>
                    	 
                    	<label>Drug<em class="text-alert">*</em></label>
						<div class="input-control select">
							<s:select name="guiDrugStock.drug.drugId" value="%{guiDrugStock.drug.drugId}"
								list="%{guiDrugList}" listKey="drugId" listValue="name"
								headerKey="-1" headerValue="-- select a drug name --"></s:select>
						</div>
						
						<a href="${contextPath}/drug/registration">add new drug</a>
						
						<label>Order Amount<em class="text-alert">*</em></label>
                        <div class="input-control text">
                        	<input type="text" name="guiDrugStock.orderAmount" value="" placeholder="Insert drug amount need to be ordered" required/>
                            <button class="btn-clear"></button>
						</div>
			
						<label>Expire Date<em class="text-alert">*</em></label>
						<div>
							<div id="expire-date-picker" class="input-control text" 
								data-role="datepicker" data-format='yyyy-mm-dd'>
								<input type="text" name="guiDrugStock.expireDateString"/>
								<div class="btn-date"></div>
							</div>
						</div>
						
						<div class="form-button-container">
                            <a onClick="$('#drug-stock-registration-form').submit(); return false;">
                                <div class="form-button tile half-vertical subheader-secondary bg-cobalt fg-white">
                                    Insert <i class="icon-pencil on-right smaller"></i>
                                </div>
                            </a>                            
                            <a href="${contextPath}">
                                <div class="form-button tile half-vertical subheader-secondary bg-cyan fg-white">
                                    Cancel <i class="icon-cancel-2 on-right smaller"></i>
                                </div>
                            </a>
	                    </div>
                        						
        			</fieldset>
        			</form>
                </div>
                <br clear="all"/>
    		</div>    
    	</div>
		
        <%-- bottom-container --%>
    	<jsp:include page="/WEB-INF/content/common/BottomContainer.jsp" flush="true"/>
        
	</div>

    <%-- footer-container --%>
    <jsp:include page="/WEB-INF/content/common/FooterContainer.jsp" flush="true"/>
   
</body>
</html>

